import React, { Component } from "react";

class Moxing extends Component {
  getDerivedStateFromStateProps(satate, props) {
    console.log("1. getDerivedStateFromProps:", props);
    return null;
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("2.shouldComponentUpdate:", nextProps);
    if (nextProps.msg === this.props.msg) {
      return false;
    }
    return true;
  }
  getSnapshotBeforeUpdate(nextProps, nextState) {
    console.log("4. getSnapshotBeforeUpdate");
    return "杨洋";
  }
  componentDidUpdate(nextProps, nextState, snapshot) {
    console.log("5. componentDidUpdate");
    console.log(snapshot);
  }
  render() {
    return (
      <div>
        <h3>Moxing组件{this.props.msg}</h3>
      </div>
    );
  }
}
class App extends Component {
  state = {
    msg: "昊辰",
  };
  dianji = () => {
    this.setState({
      msg: "昊辰",
    });
  };
  render() {
    return (
      <div>
        <Moxing msg={this.state.msg}></Moxing>
        <button onClick={this.dianji}>变化</button>
      </div>
    );
  }
}

export default App;
